import React, { useState } from 'react'
import { NavigationStackScreenComponent } from 'react-navigation-stack'
import { View, ScrollView, Text, Image, TouchableOpacity, Alert } from 'react-native';
import { commonStyle } from 'styles'
import { RadiusButton, Toast } from 'components'
import assets from './assets'
import { changeCardStyle } from './styles'
import { PosAppBank } from 'api/pos';
import { goBack } from '../services/navigation';
import { operate } from 'services/authorization';

const ChangeCardScreen: NavigationStackScreenComponent<{ bank: PosAppBank, bankList: PosAppBank[], onPress: (bank: PosAppBank) => void }> = props => {
	const [currBank, setCurrBank] = useState<PosAppBank>(props.navigation.getParam('bank'))
	const renderItem = (item: PosAppBank) => {
		return (

			<View style={changeCardStyle.itemContainer} key={item.id}>
				<TouchableOpacity style={{ width: '100%' }} onPress={() => {
					setCurrBank(item)
				}}>
					<View style={changeCardStyle.cardNameContainer}>
						<Image
							style={changeCardStyle.cardIcon}
							source={{
								uri:
									'http://icons.iconarchive.com/icons/erudus/allergy/1024/sulphurdioxide-allergy-amber-icon.png',
							}}
						/>
						<Text style={changeCardStyle.cardName}>{item.bankName}</Text>

						<Image
							resizeMode="cover"
							style={changeCardStyle.checkImage}
							source={item.id === currBank.id ? assets.images.icon_check : assets.images.icon_uncheck}
						/>

					</View>
					<Text style={changeCardStyle.cardId}>{item.bankNumber}</Text>

				</TouchableOpacity>
			</View >
		)
	}

	return (
		<View style={[commonStyle.containerColumn, changeCardStyle.container]}>
			<ScrollView keyboardShouldPersistTaps="always">
				<View style={[commonStyle.containerColumn, changeCardStyle.listContainer]}>
					{props.navigation.getParam('bankList').map(renderItem)}
				</View>
			</ScrollView>
			<RadiusButton style={changeCardStyle.comfirmBtn} onPress={() => {
				props.navigation.getParam('onPress')(currBank)
				goBack()
			}}>
				<Text style={changeCardStyle.btnText}>确认</Text>
			</RadiusButton>
		</View>
	)
}

ChangeCardScreen.navigationOptions = props => {
	return {
		title: '收款账号',
	}
}

export default ChangeCardScreen
